import Vue from "vue";
import VueRouter from "vue-router";

// 引入组件
import home from "../components/home.vue";
import about from "../components/about.vue";
import user from  "../components/user"
import phone from  "../components/phone.vue"
import tablet from  "../components/tablet"
import computer from  "../components/computer.vue"
import push from "../components/push.vue"

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
    {
        path:"/home",
        // 下面这个属性也不少，因为，我们是先进入home页面，才能进入子路由
        component: home,
        // 子路由
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "tablet",
                component: tablet
            },
            {
                path: "computer",
                component: computer
            },
            // 当进入到home时，下面的组件显示
            {
                path: "",
                component: phone
            }

        ]
    },
    {
        path: "/about",
        component: about
    },
    {
        path: "/push",
        name:"push",
        component: push
    },
    /*新增user路径，配置了动态的id*/
    {
        path: "/user/:id",
        name: "user",
        component: user
    },

    // 重定向
    {
        path: '/',
        redirect: '/home'
    }
]

var router =  new VueRouter({
    routes
})
export default router;